<template>
  <article>
    <div class="top">
      <a href="#" class="user" :id="dataFormHome.reId" >
        <span class="auther"><img :src="dataFormHome.userImg" class="userimg"></span>
        <span class="username">{{dataFormHome.userName}}</span>
      </a>
      <!-- <a href="#" class="close" v-if="$route.path.indexOf('details')<0">&times;</a> -->
    </div>
    <div class="msg_content">
      <p :class="{'msg_text':$route.path.indexOf('details')<0}">{{dataFormHome.reText}}</p>
      <div class="imgs">
        <img :src="dataFormHome.reImg" class="msg_img">
      </div>
    </div>
    <div class="interact">
      <a href="#" class="share iconfont">&#xe6f3;</a>
      <a href="#" class="commont iconfont">&#xe667;<span class="badge">{{dataFormHome.reCommentNum}}</span></a>
      <a href="#" class="down iconfont">&#xe814; <span>{{dataFormHome.reAgainst}}</span></a>
      <a href="javascript:void(0)" :class="['zan','iconfont']" @click.stop="zan($event,dataFormHome.reId,dataFormHome.support)">&#xe644; <span>{{dataFormHome.reSupport}}</span></a>
    </div>
  </article>
</template>
<script type="text/javascript">
import axios from 'axios'; 
import {Toast} from 'mint-ui';
export  default {
  name: "commonArticle",
  props:{
    dataFormHome:{
      type:Object,
      default:""
    }
  },
  data(){
    return {
      hasbt:false
    }
  },
  created(){
    // this.dataFormHome=this.$router.query
  },
  methods:{
    zan(e,id,support){
      let ele=e.target;
      let a=parseInt(support);
      if(ele.nodeName=="SPAN"){
        return false;
      }else{
        if(ele.classList.contains("hasbt")){
          ele.classList.remove("hasbt");
          ele.firstElementChild.innerText = parseInt(ele.firstElementChild.innerText)-1;
        }else{
          ele.classList.add("hasbt");
          ele.firstElementChild.innerText = parseInt(ele.firstElementChild.innerText)+1;
        }
      }
      axios.get("http://huidoo.com.cn/utopia/updateSupport.action?Id="+id).then(res=>{
        if(res.data[0].CODE==8888){
          Toast({
            message:res.data[0].data
          });
          
        }
      })
      
    }
  },
  mounted(){
  }
}
</script>
<style type="text/css" lang="less" scoped>
article{
  overflow:hidden;
  margin-bottom:14px;
  .top{
    overflow:hidden;
    .user{
      display:block;
      float:left;
      span.auther{
        width:40px;
        height:40px;
        display:inline-block;
        border-radius:50%;
        border:1px solid #dedede;
        overflow:hidden; 
        vertical-align:middle;
        margin-right:5px;
        img{
          width:100%;
          height:100%;
        }
      }
    }
    a.close{
      float:right;
    }
  }
  .msg_content{
    margin:5px 0;
    .imgs{
      margin:0 auto;
      border:1px solid #dedede;
      margin:8px 0;
    }
    .msg_img{
      width:100%;
      height:100%;
    }
    .msg_text{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height:18px;
      font-size:14px;
    }  
  }
  .interact{
    a{
      font-size:16px;
      margin:0 8px;
    }
    a.share,a.commont{
      float:left;
    }
    a.zan,a.down{
      float:right;
    }
    a.hasbt{
      color:pink;
      animation:zan 1s;
    }
    @keyframes zan{
      from{
        transform:scale(1.2);
      }
      to{
        transform:scale(1);
      }
    }
  }
}
</style>